<template>
  <div
    class="chat-group-member"
    :class="active ? 'active' : ''"
    :style="{ height: height + 'px' }"
  >
    <div class="member-avatar">
      <HeadImage
        :size="headImageSize"
        :name="member.showNickName"
        :url="member.headImage"
      />
      <
    </div>
    <div class="name" :style="{ 'line-height': height + 'px' }">
      <div>{{ member.showNickName }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  member: {
    type: Object,
    required: true,
  },
  height: {
    type: Number,
    default: 50,
  },
  active: {
    type: Boolean,
    default: false,
  },
});

const headImageSize = computed(() => {
  return Math.ceil(props.height * 0.75);
});
</script>
<style lang="scss" scoped>
.chat-group-member {
  display: flex;
  position: relative;
  padding: 0 5px;
  align-items: center;
  white-space: nowrap;
  box-sizing: border-box;

  &.active {
    background: #e1eaf7;
  }

  .name {
    padding-left: 10px;
    height: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    font-size: var(--im-font-size);
  }
}
</style>
